<html>
<head>
    <title>属性选择器</title>
    <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="topDiv" title="top" desc="页面顶部">页面顶部</div>
    <div id="menuDiv" title="menu">菜单栏</div>
    <div id="mainDiv" >主题区</div>
    <div id="leftDiv" title="mainLeft">左侧栏</div>
    <div id="rightDiv" title="mainright">右侧栏</div>
    <div id="bottomDiv" title="bottom" desc="页面底部">底部栏</div>
    <div id="advDiv" title="advbottom">广告栏</div>
    <script type="text/javascript">
        $(function(e){
            $("div[title]").css({width:"300px",height:"30px",margin:"3px"});
            $("div[title=menu]").css("border","2px solid #AAA");
            $("div[title!=menu]").css({backgroundColer:"#DDD"});
            $("div[title^=main]").css("margin-left","20px");
            $("div[title$=bottom").css("padding-left","15px");
            $("div[title*=o").css("font-style","italic");
            $("div[title*=o][desc]").css("font-weight","bold");
        });
    </script>    
</body>
</html>